<template>
  <view>
    <view class="back" @click="goBack">
      <u-icon name="arrow-left" size="24" color="#fff"></u-icon>
    </view>
    <u-swiper :list="list2" height="305"></u-swiper>
    <view class="hdBox">
      <view class="hdNBox">
        <view class="line"
          >新用户特权任选一个免费试用
          <view class="label">限时加购</view>
        </view>
        <view class="spBox">
          <view class="item" v-for="(item, index) in 3" :key="index" @click="goPage('/pages/shop/goodsDetails/goodsDetails')">
            <image src="" mode="aspectFill" />
            <view class="sj">3天13:22:22</view>
            <view class="jz">价值 ¥888</view>
            <view class="tit">【七夕专属】赫 莲娜 黑绷带活..</view>
            <view class="btn">立即报名</view>
          </view>
        </view>
      </view>
    </view>
    <view class="hbBox">
      <view class="flBox">
        <view class="tabBox">
          <view @click="tabActive = '1'" :class="{ tabItem: true, active: tabActive == '1' }">正在进行</view>
          <view @click="tabActive = '2'" :class="{ tabItem: true, active: tabActive == '2' }">即将开始</view>
          <view @click="tabActive = '3'" :class="{ tabItem: true, active: tabActive == '3' }">往期活动</view>
        </view>
      </view>
      <view>
        <HdItem v-for="(item, index) in 4" :key="index" />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { goBack, goPage } from "@/utils/commonFn";
import { ref } from "vue";
import HdItem from "./components/HdItem.vue";
const tabActive = ref("1");

const list2 = ["https://cdn.uviewui.com/uview/swiper/swiper1.png", "https://cdn.uviewui.com/uview/swiper/swiper2.png", "https://cdn.uviewui.com/uview/swiper/swiper3.png"];
</script>
<style lang="less" scoped>
.hdBox {
  background: #ffffff;
  border-radius: 32rpx 32rpx 16rpx 16rpx;
  margin-top: -20rpx;
  position: relative;
  z-index: 99;
  padding: 38rpx;
  .hdNBox {
    background: linear-gradient(270deg, #57bce1 0%, #76d7db 100%);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 20rpx;
    .line {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #ffffff;
      .label {
        background: #ffffff;
        border-radius: 20rpx 20rpx 20rpx 0rpx;
        font-size: 22rpx;
        color: #81d8d0;
        padding: 5rpx 16rpx;
        margin-left: 16rpx;
      }
    }
    .spBox {
      box-sizing: border-box;
      width: 100%;
      background: #fff;
      padding: 24rpx;
      border-radius: 16rpx;
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      .item {
        width: 32%;
        position: relative;
        image {
          border-radius: 16rpx;
          width: 100%;
          height: 152rpx;
          background: #d5cdce;
        }
        .sj {
          position: absolute;
          left: 8rpx;
          top: 8rpx;
          background: #fff9e0;
          border-radius: 16rpx;
          font-size: 20rpx;
          color: #b97b41;
          padding: 6rpx 16rpx;
        }
        .jz {
          background: #ea3b3b;
          border-radius: 0rpx 16rpx 0rpx 16rpx;
          font-size: 22rpx;
          color: #ffffff;
          padding: 6rpx 16rpx;
          position: absolute;
          left: 0rpx;
          top: 112rpx;
        }
        .tit {
          font-size: 24rpx;
          color: #333333;
          line-height: 40rpx;
          width: 100px;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 这里是超出几行省略 */
        }
        .btn {
          width: 144rpx;
          height: 50rpx;
          background: #81d8d0;
          border-radius: 200rpx 200rpx 200rpx 200rpx;
          font-size: 24rpx;
          color: #ffffff;
          text-align: center;
          line-height: 50rpx;
          margin: 5rpx auto;
        }
      }
    }
  }
}
.hbBox {
  padding: 32rpx;
  background: #fff;
  margin-top: 20rpx;
}
.flBox {
  background: #ffffff;
  padding: 0rpx 32rpx;
  .tabBox {
    display: flex;
    justify-content: space-between;
    .tabItem {
      font-size: 32rpx;
      color: #333333;
    }
    .active {
      font-size: 36rpx;
      color: #333333;
      font-weight: bold;
      position: relative;
      z-index: 2;
      &::before {
        content: "";
        position: absolute;
        left: 30%;
        bottom: -10rpx;
        width: 40rpx;
        height: 6rpx;
        background: #80d7cf;
        z-index: 1;
      }
    }
  }
}
</style>
